<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>采购订单</title>
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/css/frame.css" />
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/css/order.css" />
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/css/base.min.css" />
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/css/common.css" />
    <link rel="stylesheet" type="text/css" href="{:_SKIN}/user/layui/css/layui.css" />
    <script src="{:_SKIN}/user/layui/lay/dest/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">.layui-table, .layui-table th { text-align: center; } .layui-table{ margin-top: -10px; } .layui-tab-title a{ text-decoration: none; } .frame-container{ float: left; padding: 14px; }</style></head>
  
  <body>
    <div class="frame-container">
      <form id="OrderQuery" name="OrderQuery" action="" method="post">
        <input type="hidden" name="state" id="state" value="">
        <input type="hidden" name="backFlag" id="backFlag" value="">
        <input type="hidden" name="evaluate" id="evaluate" value="">
        <input type="hidden" name="pageNumber" id="pageNumber" value="">
        <div class="frame-title mb10">采购订单</div>
        <div class="layui-tab">
          <ul class="layui-tab-title">
            <li class="layui-this">
              <a href="">所有订单</a></li>
            <li>待付款</li>
            <li>待卖家发货</li>
            <li>待收货</li>
            <li>待评价</li></ul>
          <!--买家订单管理开始-->
          <div class="orderlist">
            <div class="ol-top">
              <div class="fl">
                <ul>
                  <li>
                    <label>订单编号</label>
                    <input type="text" name="saleCode" value="">
                    <label>商品名称</label>
                    <input type="text" name="productName" value="">
                    <label>店铺名称</label>
                    <input type="text" name="shopName" value=""></li>
                </ul>
              </div>
              <div class="fr">
                <a href="#" id="buyerSearch" class="ol-search but">搜索</a>
                <a href="#" id="resetBuyQuery" class="ol-reset but">重置</a></div>
            </div>
          </div>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                    <col width="200">
                      <col></colgroup>
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>实付款（元）</th>
                    <th>
                      <select name="status" id="status" onchange="">
                        <option value="" selected="selected">订单状态</option>
                        <option value="1">全部状态</option>
                        <option value="0">待买家付款</option>
                        <option value="2">待发货</option>
                        <option value="5">待确认收货</option>
                        <option value="5">退款中</option>
                        <option value="5">交易成功</option>
                        <option value="5">交易关闭</option></select>
                    </th>
                    <th>交易操作</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>苹果/红富士苹果</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>
                      <a href="" style="color: #1E9FFF;">详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="layui-tab-item">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                    <col width="200">
                      <col></colgroup>
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>实付款（元）</th>
                    <th>
                      <select name="status" id="status" onchange="">
                        <option value="" selected="selected">订单状态</option>
                        <option value="1">全部状态</option>
                        <option value="0">待买家付款</option>
                        <option value="2">待发货</option>
                        <option value="5">待确认收货</option>
                        <option value="5">退款中</option>
                        <option value="5">交易成功</option>
                        <option value="5">交易关闭</option></select>
                    </th>
                    <th>交易操作</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>苹果</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>
                      <a href="" style="color: #1E9FFF;">详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="layui-tab-item">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                    <col width="200">
                      <col></colgroup>
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>实付款（元）</th>
                    <th>
                      <select name="status" id="status" onchange="">
                        <option value="" selected="selected">订单状态</option>
                        <option value="1">全部状态</option>
                        <option value="0">待买家付款</option>
                        <option value="2">待发货</option>
                        <option value="5">待确认收货</option>
                        <option value="5">退款中</option>
                        <option value="5">交易成功</option>
                        <option value="5">交易关闭</option></select>
                    </th>
                    <th>交易操作</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>laji</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>
                      <a href="" style="color: #1E9FFF;">详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="layui-tab-item">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                    <col width="200">
                      <col></colgroup>
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>实付款（元）</th>
                    <th>
                      <select name="status" id="status" onchange="">
                        <option value="" selected="selected">订单状态</option>
                        <option value="1">全部状态</option>
                        <option value="0">待买家付款</option>
                        <option value="2">待发货</option>
                        <option value="5">待确认收货</option>
                        <option value="5">退款中</option>
                        <option value="5">交易成功</option>
                        <option value="5">交易关闭</option></select>
                    </th>
                    <th>交易操作</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>juzi</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>
                      <a href="" style="color: #1E9FFF;">详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="layui-tab-item">
              <table class="layui-table">
                <colgroup>
                  <col width="150">
                    <col width="200">
                      <col></colgroup>
                <thead>
                  <tr>
                    <th>商品</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>实付款（元）</th>
                    <th>
                      <select name="status" id="status" onchange="">
                        <option value="" selected="selected">订单状态</option>
                        <option value="1">全部状态</option>
                        <option value="0">待买家付款</option>
                        <option value="2">待发货</option>
                        <option value="5">待确认收货</option>
                        <option value="5">退款中</option>
                        <option value="5">交易成功</option>
                        <option value="5">交易关闭</option></select>
                    </th>
                    <th>交易操作</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>li</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>null</td>
                    <td>
                      <a href="" style="color: #1E9FFF;">详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </form>
      <script>//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element',
        function() {
          var element = layui.element();

          //…
        });</script>
    </div>
  </body>

</html>